<template>
	<div>
		<div class="line"></div>
		<div class="title">热销推荐</div>
		<ul>
			<router-link tag="li" class="item" v-for="item of list" :key="item.id" :to="'/detail/' + item.id">
				<img :src="item.imgUrl" />
				<div class="info">
					<h2>{{item.title}}</h2>
					<p>{{item.desc}}</p>
					<button>了解更多</button>
				</div>				
			</router-link>
		</ul>
	</div>
</template>

<script>
	export default {
		name: 'HomeRecommend',
		props: {
			list: Array
		}
	}
</script>

<style lang="stylus" scoped>
@import '~styles/mixins.styl'
	.line
		margin-top: .1rem
		height: .2rem
		background: #eee		
	.title
		padding-left: .25rem
		height: .8rem
		line-height: .8rem
		font-weight: bold
	.item
		overflow: hidden
		display: flex
		height: 1.9rem
		padding: 0 .2rem .2rem
		img
			width: 1.7rem
			height: 1.7rem
		.info
			flex: 1
			padding-left: .2rem
			min-width: 0
			h2
				color: #000
			p
				height: .75rem
				line-height: .75rem
				font-size: .25rem
				color: #717171
				ellipsis()
			button
				margin-top: .22rem
				display: block
				padding: 0 .2rem
				background: yellow
				border-radius: .1rem
</style>